<style>
  [class*=bui-fluid]{ background-color: #fff; }
  [class*=bui-fluid]>.span1{ height: 1rem; background-color: orange; border: 1px solid #eee; }
  [class*=bui-fluid]>.span1:nth-child(6){ height: 1.2rem; }

  .room{ width: 100%; height: 5rem; background-color: #fff; position: relative; }
  .room .box{ width: 1.2rem; height: 1.2rem; background-color: peachpuff; border: 1px solid peru; position: absolute; }
  .room .box:nth-child(1){ left: .1rem; top: .2rem; }
  .room .box:nth-child(2){ left: 2.1rem; top: 1.2rem; }
  .room .box:nth-child(3){ left: .3rem; top: 3.2rem; }
  .room .box:nth-child(4){ left: 3.8rem; top: .1rem; }
  .room .box:nth-child(5){ right: .1rem; bottom: .2rem; }
  .room .glass{ width: .3rem; height: .5rem; background-color: purple;  opacity: .75; position: absolute; left: .2rem; top: .3rem; }
  

</style>
<div class="bui-page">
  <header class="bui-bar">
    <div class="bui-bar-left">
    </div>
    <div class="bui-bar-main">布局</div>
    <div class="bui-bar-right">
    </div>
  </header>
  <main>
    
    <!-- <ul class="bui-fluid-4">
      <li class="span1"></li>
      <li class="span1"></li>
      <li class="span1"></li>
      <li class="span1"></li>
      <li class="span1"></li>
      <li class="span1"></li>
      <li class="span1"></li>
      <li class="span1"></li>
      <li class="span1"></li>
      <li class="span1"></li>
      <li class="span1"></li>
      <li class="span1"></li>
      <li class="span1"></li>
      <li class="span1"></li>
    </ul> -->

    <div class="room">
      <div class="box"></div>
      <div class="box"></div>
      <div class="box">
        <div class="glass"></div>
      </div>
      <div class="box"></div>
      <div class="box"></div>
    </div>

  </main>
  <footer>
    <!-- 底部内容 -->
  </footer>
</div>
